<template>
  <div class="setting-container">
    <div class="setting-content">
      <div class="registerInfo">
        <div class="registerInfo-content">
          <el-form :label-position="labelPosition"
                   class="ruleForm"
                   label-width="100px"
                   :model="ruleForm"
                   :rules="rules"
                   ref="ruleForm">
              <el-form-item label="原密码" prop="oldPassword">
                <el-col :span="20">
                  <el-input type="password" v-model="ruleForm.oldPassword" placeholder="请输入原密码"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="新密码" prop="newPassword">
                <el-col :span="20">
                  <el-input type="password" v-model="ruleForm.newPassword" placeholder="请输入新密码"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="确认密码" prop="alignPassword">
                <el-col :span="20">
                  <el-input type="password" v-model="ruleForm.alignPassword" placeholder="请再次输入新密码"></el-input>
                </el-col>
              </el-form-item>
          </el-form>
          <div style="float: right;margin-right: 20px;margin-bottom: 10px">
            <el-button class="border-btn" style="margin-left: 60px" @click="console()">取消</el-button>
            <el-button class="main-btn" type="primary" size="small" @click="submit()">确定</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {getQiniu, sendSms,updateMobile,updatePassword} from "../../../api/common";
  import {getInfo,updatePerson} from "../../../api/user";
  import {IsMobileExist} from "@/api/clinicManagement";
  export default {
    name: "setting",
    data() {
      return {
        activeName: 'first',
        labelPosition: 'right',
        ruleForm: {
          mobile:'',
          oldPassword:'',
          newPassword:'',
          alignPassword:'',
        },
        disabled:false,
        rules: {
          oldPassword: [
            { required: true, message: '请输入原密码', trigger: 'blur',},
            { min: 6, max: 12, message: '请输入6-12位的密码，可包含数字和字母', trigger: 'blur' }
          ],
          newPassword: [
            { required: true, message: '请输入新密码', trigger: 'blur',},
            { min: 6, max: 12, message: '请输入6-12位的密码，可包含数字和字母', trigger: 'blur' }
          ],
          alignPassword: [
            { required: true, message: '请确认密码', trigger: 'blur',},
            { min: 6, max: 12, message: '请输入6-12位的密码，可包含数字和字母', trigger: 'blur' }
          ],
        },
        updatePwd: 'first',
        isUpdatePassword:''
      };
    },
    created() {
    },
    mounted() {
      getInfo().then(res=>{
        if(res.code==200){
          this.ruleForm.mobile = res.data.mobile
        }
      })
    },
    computed: {},

    methods: {
      //取消更改
      console(){
        this.isUpdatePassword = false
        this.$emit('updatePasswordData', this.isUpdatePassword)
      },
      //提交修改
      submit(){
        this.$refs.ruleForm.validate((valid) => {
          if(valid){
            if (this.ruleForm.alignPassword != this.ruleForm.newPassword){
              this.$message.error('两次密码不一致');
              return;
            }
            let data = {
              mobile:this.ruleForm.mobile,
              old_pwd:this.ruleForm.oldPassword,
              new_pwd:this.ruleForm.newPassword,
            }
            updatePassword(data).then(res=>{
              if(res.code==200){
                this.$message.success('修改成功')
                this.isUpdatePassword = false
                this.$emit('updatePasswordData', this.isUpdatePassword)
              }else{
                this.$message.error(res.msg)
              }
            })
          }
        })
      },
      // 上传用户图像成功
      handleAvatarSuccess(res) {
        this.ruleForm.avatar = this.QINIU.qiniu_url + "/" + res.key;
        let data={
          real_name:this.real_name,
          gender:this.gender,
          avatar:this.ruleForm.avatar
        }
        updatePerson(data).then(res=>{
          if(res.code==200){
            this.$message.success('更改成功')
          }
        })
      },
      beforeAvatarUpload(file) {
        const isJPGorPNG = file.type === "image/jpeg" || file.type === "image/png" || file.type === "image/png";
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPGorPNG) {
          this.$message.error("上传头像图片只能是 JPG,JPEG或PNG 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        if (isJPGorPNG && isLt2M) {
          return getQiniu().then((res) => {
            this.qiniuToken = {
              token: res.data,
            };
          });
        } else {
          return isJPGorPNG && isLt2M
        }

      },
    },
  };
</script>
<style lang="scss" scoped>
  @import "@/assets/scss/clinicManagement/modules/setting.scss";
</style>
<style>
  .el-dialog__header {
    border-bottom: 1px solid #E6E6E6;
  }
</style>
